<template>
  <el-dialog
    title="提示"
    :visible.sync="visible"
    width="600px">
    
    <el-form ref="form" :model="form" :rules="rules" label-width="6em">
      <el-form-item label="栏目编号" name="aaa">
        <el-input v-model="form.aaa" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="栏目名称" name="aaa">
        <el-input v-model="form.aaa" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="栏目描述" name="aaa">
        <el-input v-model="form.aaa" placeholder="请输入"></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>

export default {
  data() {
    return {
      visible: false,

      form: {
        aaa: '',
        bbb: '',
        ccc: '',
      },

      rules: {
        aaa: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ],
        bbb: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ],
        ccc: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ],
      }
    }
  },
  mounted() {

  },
  methods: {
    open() {
      this.visible = true;

    },
    onSubmit() {
      this.$refs.form.validate().then(() => {
        console.log(this.form);
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>